<template>
   <el-table
    :data="currentcomments"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" class="demo-table-expand">
          <el-form-item label="评论剧目">
            <span>{{ props.row.commentshow}}</span>
          </el-form-item>
          <el-form-item label="用户评分">
            <span>{{ props.row.showrank}} 分</span>
          </el-form-item>
          <el-form-item label="评论时间">
            <span>{{ props.row.date}}</span>
          </el-form-item>
          <el-form-item label="评论内容">
            <span>{{ props.row.content}}</span>
          </el-form-item>
          <el-form-item label="评论图片："></el-form-item>
          <el-form-item>
            <el-image
             v-for="(item, index) in props.row.commentimg"
             style="width: 200px; height: 200px; padding-left: 10px"
             :key="index"
             :src="item"
             fit="cover"
             :preview-src-list="props.row.commentimg"
             lazy>
             </el-image>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label="评论剧目"
      prop="commentshow">
    </el-table-column>
    <el-table-column
      label="评分"
      prop="showrank">
      <template slot-scope="{row}">
        <el-rate
          v-model="row.showrank"
          disabled
          show-score
          text-color="#ff9900">
        </el-rate>
      </template>
    </el-table-column>
    <el-table-column
      label="评论时间"
      prop="date">
    </el-table-column>
    <el-table-column
      label="状态"
      width="100">
       <template slot-scope="{row}">
         <el-tag class="usercontent" :type="row.status ? 'success' : 'danger' "> {{getcurrentstatus(row.status)}}</el-tag>
        </template>
    </el-table-column>
    <el-table-column
      label="评论内容"
      prop="content"
      :show-overflow-tooltip="true">
    </el-table-column>
    <el-table-column label="操作" width="200">
       <template slot-scope="{row}">
          <el-button :type="row.status ? 'danger' : 'success'" @click="shieldcomment(row)">{{getbuttonstatus(row.status)}}</el-button>
          <el-button type="danger" @click="deletecomment(row)" v-has="'delete_comment'">删除</el-button>
        </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'userComments',
  data () {
    return {
      currentcomments: []
    }
  },
  watch: {
    comments () {
      // 当传入的评论列表改变的时候，要同步改变
      this.currentcomments = this.comments
    }
  },
  computed: {
    // 返回当前评论状态
    getcurrentstatus (status) {
      return function (status) {
        if (status === true) {
          return '正常'
        } else {
          return '屏蔽'
        }
      }
    },
    // 返回当前按钮文章
    getbuttonstatus (status) {
      return function (status) {
        if (status === true) {
          return '屏蔽'
        } else {
          return '恢复'
        }
      }
    }
  },
  props: {
    comments: {
      type: Array,
      default () {
        return []
      }
    }
  },
  methods: {
    shieldcomment (row) {
      let cid = row.commentid
      this.$emit('shieldcomment', cid)
    },
    deletecomment (row) {
      let cid = row.commentid
      this.$emit('deletecomment', cid)
    }
  },
  mounted () {
    this.currentcomments = this.comments
  }
}
</script>

<style lang='stylus' scoped>

</style>
